<template>
  <div id="app">
    <el-container class="max">
      <el-header class="max-el-header">
        <img class="logo float-left" src="./assets/logo.png" alt="">
        <!-- LOGO -->
        <el-dropdown trigger="click" class="float-right">
          <span class="el-dropdown-link">
            <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
            胡歌
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item>双皮奶</el-dropdown-item>
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- 下拉列表 -->
        <el-badge is-dot class="item float-right">
          <i class="el-icon-message"></i>
        </el-badge>
      </el-header>
      <!-- 头部模版 -->
      <el-container>
        <el-aside width="200px" class="max-el-aside">
          <el-menu default-active="1-1" class="el-menu-vertical-demo text-left" @open="handleOpen" @close="handleClose" background-color="#42485a"
            text-color="#fff" active-text-color="#ffffff">
            <el-submenu index="1">
              <template slot="title">
                <span>{{lang._001}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <router-link to="/sale/businessSituation">{{lang._002}}</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link to="/sale/soldNote">
                    {{lang._003}}
                  </router-link>
                </el-menu-item>
                <el-menu-item index="1-3">
                  <router-link to="/sale/diurnalRecord">{{lang._004}}</router-link>
                </el-menu-item>
                <el-menu-item index="1-4">
                  <router-link to="/sale/trendAnalysis">
                    {{lang._005}}
                  </router-link>
                </el-menu-item>
                <el-menu-item index="1-5">
                  <router-link to="/sale/occupationRatioStatistics">
                    {{lang._006}}
                  </router-link>
                </el-menu-item>
                <el-menu-item index="1-6">
                  <router-link to="/sale/commoditySalesStatistics">
                    {{lang._007}}
                  </router-link>
                </el-menu-item>
                <el-menu-item index="1-7">
                  <router-link to="/sale/discountStatistics">
                    {{lang._008}}
                  </router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 销售 -->
            <el-submenu index="2">
              <template slot="title">
                <span>{{lang._061}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1">
                  <router-link to="/goods/goodsInfo">{{lang._062}}</router-link>
                </el-menu-item>
                <el-menu-item index="2-2">
                  <router-link to="/goods/categoryIndex">{{lang._075}}</router-link>
                </el-menu-item>
                <el-menu-item index="2-3">
                  <router-link to="/goods/tasteManagement">{{lang._081}}</router-link>
                </el-menu-item>
                <el-menu-item index="2-4">
                  <router-link to="/goods/packageInformation">{{lang._082}}</router-link>
                </el-menu-item>
                <el-menu-item index="2-5">
                  <router-link to="/goods/batchOperation">{{lang._094}}</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 商品 -->
            <el-submenu index="3">
              <template slot="title">
                <span>{{lang._067}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1">
                  <router-link to="/stock/stockQuery">{{lang._127}}</router-link>
                </el-menu-item>
                <el-menu-item index="3-2">
                  <router-link to="/stock/inventoryWarning">{{lang._128}}</router-link>
                </el-menu-item>
                <el-menu-item index="3-3">
                  <router-link to="/stock/ChangesDetail">
                    {{lang._135}}
                  </router-link>
                </el-menu-item>
                <el-menu-item index="3-4">
                  <router-link to="/stock/inventoryHistory">{{lang._139}}</router-link>
                </el-menu-item>
                <el-menu-item index="3-5">
                  <router-link to="/stock/goodsReportedLoss">{{lang._147}}</router-link>
                </el-menu-item>
                <el-menu-item index="3-6">
                  <router-link to="/stock/stockTotal">{{lang._156}}</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 库存 -->
            <el-submenu index="4">
              <template slot="title">
                <span>{{lang._157}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="4-1">
                  <router-link to="/member/memberInfo">{{lang._158}}</router-link>
                </el-menu-item>
                <el-menu-item index="4-2">
                  <router-link to="/member/memberGrade">{{lang._166}}</router-link>
                </el-menu-item>
                <el-menu-item index="4-3">
                  <router-link to="/member/memberSystem">{{lang._180}}</router-link>
                </el-menu-item>
                <el-menu-item index="4-4">
                  <router-link to="/member/timeManagement">{{lang._218}}</router-link>
                </el-menu-item>
                <el-menu-item index="4-5">
                  <router-link to="/member/giftCardManagement">{{lang._233}}</router-link>
                </el-menu-item>
                <el-menu-item index="4-6">
                  <router-link to="/member/memberShipReport">{{lang._255}}</router-link>
                </el-menu-item>
                <el-menu-item index="4-7">
                  <router-link to="/member/memberAnalysis">{{lang._263}}</router-link>
                </el-menu-item>
                <el-menu-item index="4-8">
                  <router-link to="/member/smsRecord">{{lang._265}}</router-link>
                </el-menu-item>
                <el-menu-item index="4-9">
                  <router-link to="/member/memberHistory">{{lang._270}}</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 会员 -->
            <el-submenu index="5">
              <template slot="title">
                <span>{{lang._283}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="5-1">
                  <router-link to="/marketing/topUpGifts">{{lang._284}}</router-link>
                </el-menu-item>
                <el-menu-item index="5-2">
                  <router-link to="/marketing/salesPromotion">{{lang._294}}</router-link>
                </el-menu-item>
                <el-menu-item index="5-3">
                  <router-link to="/marketing/coupon">{{lang._302}}</router-link> 
                </el-menu-item>
                <el-menu-item index="5-4">
                  <router-link to="/marketing/precisionMarketing">{{lang._308}}</router-link>
                </el-menu-item>
                <el-menu-item index="5-5">
                  <router-link to="/marketing/selfHelpRecommended">{{lang._316}}</router-link>
                </el-menu-item>
                <el-menu-item index="5-6">
                  <router-link to="/marketing/autoNotification">{{lang._322}}</router-link>
                </el-menu-item>
                <el-menu-item index="5-7">
                  <router-link to="/marketing/prepaidCard">{{lang._326}}</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 营销 -->
            <el-submenu index="6">
              <template slot="title">
                <span>{{lang._334}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="6-1">
                  <router-link to="/staff/cashierInformation">{{lang._335}}</router-link>
                </el-menu-item>
                <el-menu-item index="6-2">
                  <router-link to="/staff/cashierPerformance">{{lang._347}}</router-link>
                </el-menu-item>
                <el-menu-item index="6-3">
                  <router-link to="/staff/purchasingInfo">{{lang._354}}</router-link>
                </el-menu-item>
                <el-menu-item index="6-4">
                  <router-link to="/staff/purchasingPerformance">{{lang._363}}</router-link>
                </el-menu-item>
                <el-menu-item index="6-5">
                  <router-link to="/staff/opensDetail">{{lang._378}}</router-link>
                </el-menu-item>
                <el-menu-item index="6-6">
                  <router-link to="/staff/writeDownsManagement">{{lang._381}}</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 员工 -->
            <el-submenu index="7">
              <template slot="title">
                <span>{{lang._384}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="7-1">
                  <router-link to="/traffic/supplier">{{lang._385}}</router-link>
                </el-menu-item>
                <el-menu-item index="7-2">
                  <router-link to="/traffic/storesOrder">{{lang._392}}</router-link>
                </el-menu-item>
                <el-menu-item index="7-3">
                  <router-link to="/traffic/trafficManagement">{{lang._393}}</router-link>
                </el-menu-item>
                <el-menu-item index="7-4">
                  <router-link to="/traffic/detailEnquiry">{{lang._435}}</router-link>
                </el-menu-item>
                <el-menu-item index="7-5">
                  <router-link to="/traffic/supplierSettlement">{{lang._441}}</router-link>
                </el-menu-item>
                <el-menu-item index="7-6">
                  <router-link to="/traffic/importPriceAnalysis">{{lang._460}}</router-link>
                </el-menu-item>
                <el-menu-item index="7-7">
                  <router-link to="/traffic/shopAccounts">{{lang._467}}</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 货流 -->
            <el-submenu index="8">
              <template slot="title">
                <span>{{lang._472}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="8-1">
                  <router-link to="/weStore/weStoreSet">{{lang._473}}</router-link>
                </el-menu-item>
                <el-menu-item index="8-2">
                  <router-link to="/weStore/goodsManagement">{{lang._498}}</router-link>
                </el-menu-item>
                <el-menu-item index="8-3">
                  <router-link to="/weStore/classifiedImplicit">{{lang._503}}</router-link>
                </el-menu-item>
                <el-menu-item index="8-4">
                  <router-link to="/weStore/warmReminding">{{lang._506}}</router-link>
                </el-menu-item>
                <el-menu-item index="8-5">
                  <router-link to="/weStore/weStoreOrder">{{lang._512}}</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 微店 -->
            <el-submenu index="9">
              <template slot="title">
                <span>{{lang._103}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="9-1">
                  <router-link to="/setting/roomTableData">{{lang._104}}</router-link>
                </el-menu-item>
                <el-menu-item index="9-2">
                  <router-link to="/setting/userManagement">{{lang._525}}</router-link>
                </el-menu-item>
                <el-menu-item index="9-3">
                  <router-link to="/setting/systemSet">{{lang._557}}</router-link>
                </el-menu-item>
                <el-menu-item index="9-4">
                  <router-link to="/setting/payment">{{lang._244}}</router-link>
                </el-menu-item>
                <el-menu-item index="9-5">
                  <router-link to="/setting/storeNotifications">{{lang._625}}</router-link>
                </el-menu-item>
                <el-menu-item index="9-6">
                  <router-link to="/setting/subScreenAdvertising">{{lang._630}}</router-link>
                </el-menu-item>
                <el-menu-item index="9-7">
                  <router-link to="/setting/operationLog">{{lang._634}}</router-link>
                </el-menu-item>
                <el-menu-item index="9-8">
                  <router-link to="/setting/message">{{lang._642}}</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 设置 -->
          </el-menu>
        </el-aside>
        <!-- 侧边栏 -->
        <el-main class="max-el-main" style="padding:0">
          <router-view :lang="lang" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: 'App',
    props: ['lang'],
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    mounted: function () {
      // alert(this.lang._001);
    }


  }

</script>
<style lang="less" scoped>
  .max-el-header {
    .logo {
      height: 80px;
    }
    .el-dropdown {
      font-size: 24px;
      color: #ffffff;
      line-height: 80px;
      background: #1b1b1b;
      width: 194px;
      position: relative;
      left: 20px;
    }
    .item {
      font-size: 24px;
      color: #ffffff;
      margin-top: 26px; // margin-right: 20px;
    }
  }

</style>

<style>
  *{
    font-family: '微软雅黑'
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  .max-el-header,
  .max-el-footer {
    background-color: #2c2e32;
    color: #333;
    text-align: center;
    /* line-height: 60px; */
    height: 80px !important;
  }

  .max-el-aside {
    background-color: #42485a;
    color: #333;
    text-align: center;
    line-height: 200px;
    overflow-x: hidden;
  }

  .max-el-main {
    background-color: #f3f4f5;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .max-el-aside,
  .el-container:nth-child(6) .max-el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .max-el-aside {
    line-height: 320px;
  }

  .el-container.is-vertical.max {
    height: 100vh;
  }

  .el-dropdown-menu {
    width: 194px;
  }

  .el-submenu__title {
    height: 60px;
    line-height: 60px;
    padding-left: 55px !important;
  }

  .el-menu-item.is-active {
    background: #409eff;
  }

  .el-submenu__icon-arrow {
    right: unset;
    left: 20px;
    font-size: 15px;
    font-weight: bold;

  }

  .el-submenu__title i {
    color: #FFF;
  }

  .el-menu-item {
    background: #323644 !important;
  }

  .el-menu-item-group__title {
    display: none;
  }

  .el-menu {
    width: 200px;
  }

</style>
